<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    disableScroll: true, // 微信禁止页面滚动
    'app-plus': {
      bounce: 'none', // 禁用 iOS 弹性效果
    },
  },
}
</route>
<template>
  <PageLayout :navbarShow="false">
    <!-- 添加安全区域适配容器 -->
    <view
      class="safe-area-top"
      :style="{ height: safeAreaInsets.top + 'px', backgroundColor: '#your-banner-bg-color' }"
    ></view>
    <!--轮播图-->
    <!-- prettier-ignore -->
    <swiper class="swiper default-box" :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000" :duration="500">
      <!--本地配置轮播图-->
      <template v-if="isLocalConfig">
        <swiper-item v-for="(item, index) in swiperList" :key="index" >
          <image :src="item.url" mode="aspectFill" v-if="item.type === 'image'"></image>
          <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"  objectFit="cover"  v-if="item.type === 'video'"></video>
        </swiper-item>
      </template>
      <!--线上配置轮播图-->
      <template v-if="!isLocalConfig">
        <swiper-item v-for="(item, index) in carouselList" :key="index" >
          <image :src="getFileAccessHttpUrl(item)" mode="aspectFill"></image>
        </swiper-item>
      </template>
      </swiper>
    <!-- 消息通知 -->
    <view
      class="default-box notification-container"
      @click="showAllNotifications = !showAllNotifications"
    >
      <view class="notification-header">
        <text class="notification-title">
          <wd-icon custom-class="notification-icon" name="notification-filled" size="22px" />
          消息通知
        </text>
        <text class="notification-content">
          {{ notifications.length > 0 ? notifications[0].title : '暂无消息' }}
        </text>
        <wd-icon
          name="arrow-down"
          size="14px"
          custom-class="arrow-icon"
          :class="{ 'rotate-180': showAllNotifications }"
        />
      </view>
      <view class="notification-list" :class="{ show: showAllNotifications }">
        <view
          v-for="(item, index) in notifications.slice(0, 5)"
          :key="index"
          class="notification-item"
        >
          <text class="notification-index">{{ index + 1 }}.</text>
          <text class="notification-item-title">{{ item.title }}</text>
        </view>
      </view>
    </view>
    <!-- 消息通知 -->
    <scroll-view class="scrollView" :scroll-y="true" scroll-with-animation>
      <!-- 消息通知组件 -->
      <!-- 消息通知组件 -->
      <!-- 工厂用户主页组件 -->
      <RoleFactoryHome v-if="userRole === 'factory'"></RoleFactoryHome>
      <!-- 工厂用户主页组件 -->
      <!-- 种植户用户主页组件 -->
      <RoleGrowerHome v-if="userRole === 'grows'"></RoleGrowerHome>
      <!-- 种植户用户主页组件 -->

      <view class="action-button oil-extract-btn" @click="handelCell({ name: 'inventory' })">
        成品库存查询
      </view>
      <text class="under-buttom">联系平台客服：12345678901</text>
    </scroll-view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getFileAccessHttpUrl } from '@/common/uitls'
import RoleFactoryHome from './components/RoleFactoryHome.vue'
import RoleGrowerHome from './components/RoleGrowerHome.vue'
import { useUserStore } from '@/store/user'
import { useRouter } from '@/plugin/uni-mini-router'

defineOptions({
  name: 'index',
  options: {
    styleIsolation: 'shared',
  },
})

// 获取安全区域信息
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets || { top: 0, bottom: 0, left: 0, right: 0 }

const router = useRouter()
const isLocalConfig = getApp().globalData.isLocalConfig
const carouselList = ref([])
const swiperList = ref([])
const userRole = ref('') // 'factory' 或 'grower'
const userStore = useUserStore()

const showAllNotifications = ref(false)
const notifications = ref([
  { id: 1, title: '系统维护通知：本周日凌晨进行系统维护，预计维护时间2小时' },
  { id: 2, title: '新功能上线：新增数据统计功能，欢迎体验' },
  { id: 3, title: '安全提醒：请及时修改默认密码，确保账户安全' },
  { id: 4, title: '活动公告：五一劳动节期间优惠活动即将开始' },
  { id: 5, title: '版本更新：V2.1.0版本已发布，请及时更新' },
])

if (isLocalConfig) {
  swiperList.value = [
    {
      id: 1,
      type: 'image',
      url: 'https://static.jeecg.com/upload/test/banner0_1595850438042.jpeg',
      link: '',
    },
    {
      id: 2,
      type: 'image',
      url: 'https://static.jeecg.com/upload/test/banner2_1595818081327.jpg',
      link: '',
    },
    {
      id: 3,
      type: 'image',
      url: 'https://static.jeecg.com/upload/test/oabanner-2_1595648520760.png',
      link: '',
    },
    {
      id: 4,
      type: 'image',
      url: 'https://static.jeecg.com/upload/test/banner5_1595818089013.jpeg',
      link: '',
    },
  ]
}

// 模拟获取用户角色
onMounted(() => {
  // 模拟API调用获取用户角色
  setTimeout(() => {
    const userRoleName = userStore.userInfo.userRoleName
    if (userRoleName && (userRoleName.includes('工厂') || userRoleName.includes('管理员'))) {
      userRole.value = 'factory'
    } else {
      userRole.value = 'grows'
    }
  }, 100)
})

const handelCell = (item) => {
  getRouterIsLogined()
  router.push({
    name: item.name,
  })
}
</script>

<style lang="scss" scoped>
@import '@/style/custom/variables.scss';
@import '@/style/custom/home.scss';

.action-button {
  background-color: $primary-color;
  color: white;
  border-radius: 50upx;
  padding: 20upx;
  font-size: 32upx;
  /* font-weight: bold; */
  cursor: pointer;
  transition: all 0.3s;
  margin: 20upx 30upx;
  text-align: center;
}

.action-button:active {
  opacity: 0.8;
}
.swiper {
  height: 375upx;
  flex: none;
  image,
  video {
    width: 100%;
    display: block;
    height: 100%;
    margin: 0;
  }
  :deep(.uni-swiper-dot) {
    transition: all 400ms ease;
    background-color: rgba(255, 255, 255, 0.4);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 0 4px;
  }
  :deep(.uni-swiper-dot-active) {
    background-color: rgba(255, 255, 255, 1);
    width: 16px;
    border-radius: 2px;
  }
}
.notification-container {
  background-color: #fff;
  padding: 20upx 30upx 0 30upx;
  margin: 20upx 0 0 0;
  border-radius: 10upx;
  box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.05);
  overflow: hidden; // 防止内容溢出时显示滚动条
}

.notification-header {
  display: flex;
  align-items: center;
  .notification-title {
    font-weight: bold;
    margin-right: 20upx;
    flex-shrink: 0;
  }
  .notification-content {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
  }
  .arrow-icon {
    margin-left: 10upx;
    transition: transform 0.3s ease;
    &.rotate-180 {
      transform: rotate(180deg);
    }
  }
}

.notification-list {
  padding-top: 20upx;
  border-top: 1px solid #f0f0f0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
  opacity: 0;

  &.show {
    margin-top: 20upx;
    max-height: 500px; // 设置为足够大的值以容纳所有内容
    opacity: 1;
  }
}

.notification-item {
  display: flex;
  margin-bottom: 15upx;
  .notification-index {
    color: #999;
    flex-shrink: 0;
  }
  .notification-item-title {
    flex: 1;
    color: #333;
  }
}

.under-buttom {
  text-align: center;
  padding: 20upx 0;
  color: #999;
  display: block;
  width: 100%;
  font-size: 24upx;
  background-color: #f5f5f5;
}
.default-box {
  border-radius: 20upx;
  margin: 20upx;
  box-shadow: 0 10upx 10upx rgba(0, 0, 0, 0.1);
}
.notification-icon {
  color: $primary-color;
  margin-right: 10upx;
}

/* 安全区域适配 */
.safe-area-top {
  width: 100%;
  background-color: $primary-color;
}
</style>
